<!doctype html><html><head><meta charset="utf-8" />
<title>uuCanvas.js - README</title>
<style>@import url(README.css);</style>
<style>
html.iffx2 .star {
  display: -moz-inline-box;
}
.star {
  display: inline-block;
  width: 50px;
  height: 24px;
  background: none no-repeat center bottom;
  font-size: small;
  font-weight: bold;
  color: gray;
}
.lv5 { background-image: url(img/5star.gif); }
.lv4 { background-image: url(img/4star.gif); }
.lv3 { background-image: url(img/3star.gif); }
.lv2 { background-image: url(img/2star.gif); }
.lv1 { background-image: url(img/1star.gif); }
.lv0 { background-image: url(img/0star.gif); }
a.star { border-bottom: 1px solid skyblue; }

table.rate>tbody>tr>td:nth-last-child(-n+9) {
  text-align: center;
}

</style>
</head><body>
<p>
   | <a href="http://code.google.com/p/uupaa-js-spinoff/">HOME</a>
   | <a href="./README.htm">README</a>
   | <a href="./DEMO.htm">DEMO</a>
   | <a href="./CLASS.htm">CLASS</a>
   | <a href="./CHANGELOG.htm">CHANGE LOG</a>
   | <a href="./DONATE.htm">DONATE</a>
   | <a href="./LICENSE.htm">LICENSE</a>
   |
</p>
<hr />
<h1>uuCanvas.js</h1>
<p>uuCanvas.js is JavaScript library where <a href="http://www.whatwg.org/specs/web-apps/current-work/#the-canvas-element">HTML5::Canvas</a> is offered.
  <br /><span lang="ja">uuCanvas.js は <a href="http://www.whatwg.org/specs/web-apps/current-work/#the-canvas-element">HTML5::Canvas</a> 互換機能を提供する JavaScript ライブラリです。</span></p>
<hr />
<h2>Features - 特徴</h2>
<ul>
<li>Multiple backend:
    <br />- Rendering is done with Silverlight, Flash and VML in IE, and other browsers do rendering with HTML5::Canvas.
    <br /><span lang="ja"> - IE なら Silverlight, Flash, VML のいずれかでレンダリングを行い、IE以外なら HTML5::Canvas でレンダリングします。</span></li>
<li>Right and Light:
    <br />- The rendering of the sample of <a href="https://developer.mozilla.org/en/Canvas_tutorial">MDC Canvas tutorial</a> can be almost done.
    <br /><span lang="ja"> - <a href="https://developer.mozilla.org/ja/Canvas_tutorial">MDC Canvas tutorial</a> にある、ほとんどのサンプルをレンダリングできます。</span></li>
<li>Extend Native Canvas API:
    <br /><span lang="ja"> - IE以外のブラウザの機能も拡張します。<br />Opera9.6 ～ 10.10, Firefox3 でも、
                             <a href="demo.canvas/8_1_canvas_fillText_strokeText.htm">fillText()</a>,
                             <a href="demo.canvas/8_2_canvas_measureText.htm">measureText()</a>,
                             <a href="demo.canvas/9_1_canvas_shadow_text.htm">Text Shadow</a> が使えるようになります。
                             </span></li>
<li>ALL IN ONE:
    <br /><span lang="ja"> - Canvas を使う上で必要となる、色, フォントや、セレクタ、イベントまで、必要と思われる様々な<a href="#uupaajs">機能</a>を一式提供します。
                             </span></li>

</ul>

<hr />
<h2>Browser support - サポートするブラウザ</h2>
<ul>
 <li><img src="img/c32.alpha.png" alt="" />Google Chrome 4+</li>
 <li><img src="img/s32.alpha.png" alt="" />Safari 4+</li>
 <li><img src="img/i32.alpha.png" alt="" />iPhone 3G+ / iPod</li>
 <li><img src="img/o32.alpha.png" alt="" />Opera 9.6+<i></i></li>
 <li><img src="img/f32.alpha.png" alt="" />Firefox 3+<i></i></li>
 <li><img src="img/e32.alpha.png" alt="" />IE 6, IE7, IE 8<i>(Sivlerlight 3+, FlashPlayer 9+)</i></li>
</ul>

<hr />
<h2>Rendering backend - レンダリングバックエンド</h2>
<table>
<tr><th></th><th>&lt;canvas&gt;</th><th>&lt;xaml&gt;<br />Silverlight</th><th>Flash</th><th>&lt;vml&gt;</th><th>&lt;svg&gt;</th></tr>
<tr><td><img src="img/c32.alpha.png" alt="" />Google Chrome 4+</td>
  <td><img src="img/check.png" alt="v" /></td>
  <td>-</td>
  <td>-</td>
  <td>-</td>
  <td>-</td></tr>
<tr><td><img src="img/s32.alpha.png" alt="" />Safari 4+</td>
  <td><img src="img/check.png" alt="v" /></td>
  <td>-</td>
  <td>-</td>
  <td>-</td>
  <td>-</td></tr>
<tr><td><img src="img/i32.alpha.png" alt="" />iPhone 3G+ / iPod</td>
  <td><img src="img/check.png" alt="v" /></td>
  <td>-</td>
  <td>-</td>
  <td>-</td>
  <td>-</td></tr>
<tr><td><img src="img/e32.alpha.png" alt="" />IE 6, IE 7, IE 8 (back compat)</td>
  <td>-</td>
  <td><img src="img/check.png" alt="v" /></td>
  <td><img src="img/check.png" alt="v" /></td>
  <td><img src="img/check.png" alt="v" /></td>
  <td>-</td></tr>
<tr><td><img src="img/e32.alpha.png" alt="" />IE 8</td>
  <td>-</td>
  <td><img src="img/check.png" alt="v" /></td>
  <td><img src="img/check.png" alt="v" /></td>
  <td><img src="img/check.png" alt="v" /></td>
  <td>-</td></tr>
<tr><td><img src="img/o32.alpha.png" alt="" />Opera 9.6 - 10.10</td>
  <td><img src="img/check.png" alt="v" /></td>
  <td>-</td>
  <td>-</td>
  <td>-</td>
  <td><img src="img/check.png" alt="v" /></td></tr>
<tr><td><img src="img/o32.alpha.png" alt="" />Opera 10.50+</td>
  <td><img src="img/check.png" alt="v" /></td>
  <td>-</td>
  <td>-</td>
  <td>-</td>
  <td>-</td></tr>
<tr><td><img src="img/f32.alpha.png" alt="" />Firefox 3+</td>
  <td><img src="img/check.png" alt="v" /></td>
  <td>-</td>
  <td>-</td>
  <td>-</td>
  <td>-</td></tr>
</table>

<p><span lang="ja">各バックエンドは以下のような特徴を持っています。</span></p>
<ul>
  <li>VML Backend - 初期化が速くページ表示直後からすぐに描画できる。
        パスが綺麗。アニメーションは苦手。ズーム可能。
        プラグインが不要なため実行環境を問わない。描画結果を維持したままDOMツリー上を移動できる(DOM + CSS によるアニメーションが可能)。
        PixelAPIは非サポート。</li>
  <li>Silverlight Backend - 初期化に100msオーダーの時間が必要(すぐに絵が出ない)。
        パスが綺麗。そこそこのアニメーション速度が出る。ズーム可能。
        プラグイン(Silverlight 3+)が必要。DOMツリー上を移動できない(デタッチとリアタッチ不能)。
        Pixel APIは非サポート。</li>
  <li>Flash Backend - 外部ファイル(uu.canvas.swf)のロードが発生し、初期化に500msオーダーの時間が必要(ネットワーク状態にも依存)。
        パスが汚い。ドットやパーティクル系のアニメーションが速い。ブラウザのズームに追従できず画面レイアウトが崩れる。
        プラグイン(FlashPlayer 9+)が必要。DOMツリー上を移動できない(デタッチとリアタッチ不能)。
        Pixel APIをサポート。</li>
</ul>
<table>
<tr><th></th><th>&lt;canvas&gt;</th><th>Silverlight</th><th>Flash</th><th>&lt;vml&gt;</th></tr>
<tr><td>実行環境を選ばない(プラグイン不要)</td>
  <td>◎</td>
  <td>×</td>
  <td>×</td>
  <td>◎</td>
  </tr>
<tr><td>外部ファイル不要(Networkアクセス不要)</td>
  <td>◎</td>
  <td>◎</td>
  <td>× 要 uu.canvas.swf</td>
  <td>◎</td>
  </tr>
<tr><td>初期化に必要な時間</td>
  <td>◎ 0ms</td>
  <td>△ 50ms～100ms</td>
  <td>× 500ms～(Network依存)</td>
  <td>○ ～20ms</td>
  </tr>
<tr><td>パスの描画品質</td>
  <td>◎</td>
  <td>◎</td>
  <td>×</td>
  <td>◎</td>
  </tr>
<tr><td>アニメーション速度(毎回全体を再描画)</td>
  <td>◎</td>
  <td>○</td>
  <td>○</td>
  <td>×</td>
  </tr>
<tr><td>アニメーション速度(前回の結果に重ね書き)</td>
  <td>◎</td>
  <td>△</td>
  <td>○</td>
  <td>×</td>
  </tr>

<tr><td>ズーム(レイアウト維持 + アクセシビリティ)</td>
  <td>◎</td>
  <td>◎</td>
  <td>×</td>
  <td>◎</td>
  </tr>
<tr><td>DOMツリー上の移動</td>
  <td>◎</td>
  <td>×</td>
  <td>×</td>
  <td>◎</td>
  </tr>
<tr><td>Canvas間の画像転送(drawImage)</td>
  <td>◎</td>
  <td>◎</td>
  <td>◎</td>
  <td>○</td>
  </tr>
<tr><td>Pixel API のサポート(getImageData...)</td>
  <td>◎</td>
  <td>×</td>
  <td>○</td>
  <td>×</td>
  </tr>
</table>

<hr />
</blockquote>
<h1>Support level</h1>
<p><span lang="ja">サポート状況を★の数で表現しています。</span></p>
<blockquote style="background: #122; padding: 10px">
<p><span class="star lv5"></span> 5: Supported. - <span lang="ja">サポートしています。</span></p>
<p><span class="star lv4"></span> 4: Result is somewhat different. - <span lang="ja">結果が多少異なります。</span></p>
<p><span class="star lv2"></span> 2: has some problems. - <span lang="ja">多少の問題があります。</span></p>
<p><span class="star lv1"></span> 1: Has a fatal problem. - <span lang="ja">致命的な問題があります。</span></p>
<p><span class="star lv0"></span> 0: Unsupported. - <span lang="ja">サポートしていません。</span></p>
</blockquote>



<table class="rate">
<caption>HTMLCanvasElement</caption>
<thead>
<tr>
  <th class="maxmin" style="min-width: 250px"></th>
  <th class="maxmin"><img src="img/c32.alpha.png" alt="" /></th>
  <th class="maxmin"><img src="img/s32.alpha.png" alt="" /></th>
  <th class="maxmin"><img src="img/i32.alpha.png" alt="" /></th>
  <th class="maxmin"><img src="img/e32.alpha.png" alt="" /></th>
  <th class="maxmin"><img src="img/o32.alpha.png" alt="" /></th>
  <th class="maxmin"><img src="img/f32.alpha.png" alt="" /></th></tr>
</thead>
<tbody>
<tr>
  <td>width</td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td></tr>
<tr>
  <td>height</td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td></tr>
<tr>
  <td>toDataURL()</td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv0">SL</span>
      <span class="star lv5">Flash</span>
      <span class="star lv0">VML</span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td></tr>
<tr>
  <td>toDataURL("image/png")</td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv0">SL</span>
      <span class="star lv5">Flash</span>
      <span class="star lv0">VML</span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td></tr>
<tr>
  <td>toDataURL("image/jpeg")</td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv0">SL</span>
      <span class="star lv5">Flash</span>
      <span class="star lv0">VML</span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td></tr>
<tr>
  <td>getContext("2d")</td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td></tr>
</tbody>
</table>

<table class="rate">
<caption>CanvasRenderingContext2D</caption>
<thead>
<tr>
  <th class="maxmin" style="min-width: 250px"></th>
  <th class="maxmin"><img src="img/c32.alpha.png" alt="" /></th>
  <th class="maxmin"><img src="img/s32.alpha.png" alt="" /></th>
  <th class="maxmin"><img src="img/i32.alpha.png" alt="" /></th>
  <th class="maxmin"><img src="img/e32.alpha.png" alt="" /></th>
  <th class="maxmin"><img src="img/o32.alpha.png" alt="" /></th>
  <th class="maxmin"><img src="img/f32.alpha.png" alt="" /></th></tr>
</thead>
<tfoot>
<tr>
  <td></td>
  <th><img src="img/c32.alpha.png" alt="" /></th>
  <th><img src="img/s32.alpha.png" alt="" /></th>
  <th><img src="img/i32.alpha.png" alt="" /></th>
  <th><img src="img/e32.alpha.png" alt="" /></th>
  <th><img src="img/o32.alpha.png" alt="" /></th>
  <th><img src="img/f32.alpha.png" alt="" /></th></tr>
</tfoot>
<tbody>
<tr>
  <td>canvas</td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td></tr>
<tr>
  <td><a href="demo.canvas/4_3_canvas_globalalpha.htm">globalAlpha</a></td>
  <td><span class="star lv3"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td></tr>
<tr>
  <td><a href="demo.canvas/6_1_canvas_composite.htm">global<br />CompositeOperation</a></td>
  <td><span class="star lv4"></span></td>
  <td><span class="star lv4"></span></td>
  <td><span class="star lv4"></span></td>
  <td><span class="star lv2"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv4"></span></td></tr>
<tr>
  <td><a href="demo.canvas/4_2_canvas_strokestyle.htm">strokeStyle</a></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td></tr>
<tr>
  <td><a href="demo.canvas/4_1_canvas_fillstyle.htm">fillStyle</a></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td></tr>
<tr>
  <td><a href="demo.canvas/4_5_canvas_linewidth.htm">lineWidth</a></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td></tr>
<tr>
  <td><a href="demo.canvas/4_6_canvas_linecap.htm">lineCap</a></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td></tr>
<tr>
  <td><a href="demo.canvas/4_7_canvas_linejoin.htm">lineJoin</a></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td></tr>
<tr>
  <td><a href="demo.canvas/4_8_canvas_miterlimit.htm">miterLimit</a></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv4"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td></tr>
<tr>
  <td><a href="demo.canvas/9_1_canvas_shadow_text_direction.htm">shadowColor,<br />shadowOffsetX,<br />shadowOffsetY,<br />shadowBlur</a></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv3"></span></td>
  <td><span class="star lv5">SL</span>
      <span class="star lv4">Flash</span>
      <span class="star lv4">VML</span></td>
  <td><span class="star lv1">9.6+</span>
      <span class="star lv5">10.50+</span></td>
  <td><span class="star lv4">3.0+</span>
      <span class="star lv5">3.5+</span></td></tr>
<tr>
  <td><a href="demo.canvas/8_7_canvas_fontFamily.htm">font<br />textAlign</a></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv1"></span></td>
  <td><span class="star lv4"></span></td>
  <td><span class="star lv4"></span></td>
  <td><span class="star lv5"></span></td></tr>
<tr>
  <td><a href="demo.canvas/8_4_canvas_textBaseline.htm">textBaseline = "top"</a></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv1"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td></tr>
<tr>
  <th>Gradient, Pattern API</th>
  <th><img src="img/c32.alpha.png" alt="" /></th>
  <th><img src="img/s32.alpha.png" alt="" /></th>
  <th><img src="img/i32.alpha.png" alt="" /></th>
  <th><img src="img/e32.alpha.png" alt="" /></th>
  <th><img src="img/o32.alpha.png" alt="" /></th>
  <th><img src="img/f32.alpha.png" alt="" /></th></tr>
<tr>
  <td><a href="demo.canvas/4_9_canvas_lineargradient.htm">createLinearGradient()</a></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td></tr>
<tr>
  <td><a href="demo.canvas/4_10_canvas_radialgradient.htm">createRadialGradient()</a></td>
  <td><span class="star lv4"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td></tr>
<tr>
  <td><a href="demo.canvas/4_11_canvas_createpattern.htm">createPattern()</a></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td></tr>
<tr>
  <th>State, Matrix API</th>
  <th><img src="img/c32.alpha.png" alt="" /></th>
  <th><img src="img/s32.alpha.png" alt="" /></th>
  <th><img src="img/i32.alpha.png" alt="" /></th>
  <th><img src="img/e32.alpha.png" alt="" /></th>
  <th><img src="img/o32.alpha.png" alt="" /></th>
  <th><img src="img/f32.alpha.png" alt="" /></th></tr>
<tr>
  <td><a href="demo.canvas/5_1_canvas_savestate.htm">save(),<br />restore()</a></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td></tr>
<tr>
  <td><a href="demo.canvas/5_4_canvas_scale.htm">scale()</a></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td></tr>
<tr>
  <td><a href="demo.canvas/5_3_canvas_rotate.htm">rotate()</a></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td></tr>
<tr>
  <td><a href="demo.canvas/5_2_canvas_translate.htm">translate()</a></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td></tr>
<tr>
  <td><a href="demo.canvas/5_5_canvas_transform.htm">transform(),<br />setTransform</a></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td></tr>
<tr>
  <th>Rect API</th>
  <th><img src="img/c32.alpha.png" alt="" /></th>
  <th><img src="img/s32.alpha.png" alt="" /></th>
  <th><img src="img/i32.alpha.png" alt="" /></th>
  <th><img src="img/e32.alpha.png" alt="" /></th>
  <th><img src="img/o32.alpha.png" alt="" /></th>
  <th><img src="img/f32.alpha.png" alt="" /></th></tr>
<tr>
  <td><a href="demo.canvas/2_8_canvas_clearRect.htm">clearRect()</a></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5">SL</span>
      <span class="star lv4">Flash</span>
      <span class="star lv2">VML</span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td></tr>
<tr>
  <td><a href="demo.canvas/2_1_canvas_rect.htm">fillRect(),<br />strokeRect()</a></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td></tr>

<tr>
  <th>Path API</th>
  <th><img src="img/c32.alpha.png" alt="" /></th>
  <th><img src="img/s32.alpha.png" alt="" /></th>
  <th><img src="img/i32.alpha.png" alt="" /></th>
  <th><img src="img/e32.alpha.png" alt="" /></th>
  <th><img src="img/o32.alpha.png" alt="" /></th>
  <th><img src="img/f32.alpha.png" alt="" /></th></tr>
<tr>
  <td><a href="demo.canvas/2_2_canvas_moveto.htm">beginPath()</a></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td></tr>
<tr>
  <td><a href="demo.canvas/2_3_canvas_lineto.htm">closePath()</a></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td></tr>
<tr>
  <td><a href="demo.canvas/2_3_canvas_lineto.htm">moveTo(),<br />lineTo()</a></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td></tr>
<tr>
  <td><a href="demo.canvas/2_5_canvas_quadraticcurveto.htm">quadraticCurveTo()</a></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5">SL</span>
      <span class="star lv4">Flash</span>
      <span class="star lv5">VML</span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td></tr>
<tr>
  <td><a href="demo.canvas/2_6_canvas_beziercurveto.htm">bezierCurveTo()</a></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5">SL</span>
      <span class="star lv4">Flash</span>
      <span class="star lv5">VML</span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td></tr>
<tr>
  <td>arcTo()</td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv0"></span></td>
  <td><span class="star lv1"></span></td>
  <td><span class="star lv1"></span></td></tr>

<tr>
  <td>rect()</td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td></tr>
<tr>
  <td><a href="demo.canvas/2_4_canvas_arc.htm">arc()</a></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td></tr>
<tr>
  <td><a href="demo.canvas/2_3_canvas_lineto.htm">fill()</a></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td></tr>
<tr>
  <td><a href="demo.canvas/4_9_canvas_lineargradient.htm">linearGradient<br />fill()</a></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv4">SL</span>
      <span class="star lv4">Flash</span>
      <span class="star lv4">VML</span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td></tr>
<tr>
  <td><a href="demo.canvas/4_10_canvas_radialgradient.htm">radialGradient<br />fill()</a></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv4">SL</span>
      <span class="star lv4">Flash</span>
      <span class="star lv3">VML</span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td></tr>
<tr>
  <td><a href="demo.canvas/4_11_canvas_createpattern.htm">pattern<br />fill()</a></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5">SL</span>
      <span class="star lv3">Flash</span>
      <span class="star lv4">VML</span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td></tr>
<tr>
  <td><a href="demo.canvas/9_2_canvas_shadow_path.htm">shadow<br />fill()</a></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv4"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td></tr>
<tr>
  <td><a href="demo.canvas/2_3_canvas_lineto.htm">stroke()</a></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td></tr>
<tr>
  <td><a href="demo.canvas/9_3_canvas_shadow_stroke.htm">linearGradient<br />stroke()</a></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5">SL</span>
      <span class="star lv5">Flash</span>
      <span class="star lv3">VML</span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td></tr>
<tr>
  <td><a href="demo.canvas/9_3_canvas_shadow_stroke.htm">radialGradient<br />stroke()</a></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5">SL</span>
      <span class="star lv5">Flash</span>
      <span class="star lv3">VML</span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td></tr>
<tr>
  <td><a href="demo.canvas/9_4_canvas_image_shadow+pattern.htm">pattern<br />stroke()</a></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5">SL</span>
      <span class="star lv2">Flash</span>
      <span class="star lv4">VML</span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td></tr>
<tr>
  <td><a href="demo.canvas/6_2_canvas_clipping.htm">clip()</a></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5">SL</span>
      <span class="star lv3">Flash</span>
      <span class="star lv2">VML</span></td>
  <td><span class="star lv1">9.6+</span>
      <span class="star lv5">10+</span></td>
  <td><span class="star lv5"></span></td></tr>
<tr>
  <td>isPointInPath()</td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv0">SL</span>
      <span class="star lv5">Flash</span>
      <span class="star lv0">VML</span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td></tr>

<tr>
  <th>Text API</th>
  <th><img src="img/c32.alpha.png" alt="" /></th>
  <th><img src="img/s32.alpha.png" alt="" /></th>
  <th><img src="img/i32.alpha.png" alt="" /></th>
  <th><img src="img/e32.alpha.png" alt="" /></th>
  <th><img src="img/o32.alpha.png" alt="" /></th>
  <th><img src="img/f32.alpha.png" alt="" /></th></tr>
<tr>
  <td><a href="demo.canvas/8_1_canvas_fillText_strokeText.htm">fillText()</a></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv1"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td></tr>

<tr>
  <td><a href="demo.canvas/9_1_canvas_shadow_text_linearGradient.htm">linearGradient<br />fillText()</a></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv1"></span></td>
  <td><span class="star lv5">SL</span>
      <span class="star lv3">Flash</span>
      <span class="star lv2">VML</span></td>
  <td><span class="star lv0">9.6+</span>
      <span class="star lv5">10.50+</span></td>
  <td><span class="star lv2">3.0+</span>
      <span class="star lv5">3.5+</span></td></tr>
<tr>
  <td><a href="demo.canvas/9_1_canvas_shadow_text_radialGradient.htm">radialGradient<br />fillText()</a></td>
  <td><span class="star lv1"></span></td>
  <td><span class="star lv1"></span></td>
  <td><span class="star lv1"></span></td>
  <td><span class="star lv1"></span></td>
  <td><span class="star lv0">9.6+</span>
      <span class="star lv1">10.50+</span></td>
  <td><span class="star lv0">3.0+</span>
      <span class="star lv1">3.5+</span></td></tr>
<tr>
  <td><a href="demo.canvas/9_1_canvas_shadow_text_pattern.htm">pattern<br />fillText()</a></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv1"></span></td>
  <td><span class="star lv5">SL</span>
      <span class="star lv0">Flash</span>
      <span class="star lv4">VML</span></td>
  <td><span class="star lv0">9.6+</span>
      <span class="star lv5">10.50+</span></td>
  <td><span class="star lv0">3.0+</span>
      <span class="star lv5">3.5+</span></td></tr>
<tr>
  <td><a href="demo.canvas/9_1_canvas_shadow_text.htm">shadow<br />fillText()</a></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv1"></span></td>
  <td><span class="star lv5">SL</span>
      <span class="star lv5">Flash</span>
      <span class="star lv3">VML</span></td>
  <td><span class="star lv3">9.6+</span>
      <span class="star lv5">10.50+</span></td>
  <td><span class="star lv3">3.0+</span>
      <span class="star lv5">3.5+</span></td></tr>
<tr>
  <td><a href="demo.canvas/8_6_canvas_fontSize_strokeText.htm">strokeText()</a></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv1"></span></td>
  <td><span class="star lv4">SL</span>
      <span class="star lv5">Flash</span>
      <span class="star lv2">VML</span></td>
  <td><span class="star lv2">9.6+</span>
      <span class="star lv5">10.50+</span></td>
  <td><span class="star lv5"></span></td></tr>
<tr>
  <td><a href="demo.canvas/8_2_canvas_measureText.htm">measureText()</a></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv1"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td></tr>

<tr>
  <th>Image API</th>
  <th><img src="img/c32.alpha.png" alt="" /></th>
  <th><img src="img/s32.alpha.png" alt="" /></th>
  <th><img src="img/i32.alpha.png" alt="" /></th>
  <th><img src="img/e32.alpha.png" alt="" /></th>
  <th><img src="img/o32.alpha.png" alt="" /></th>
  <th><img src="img/f32.alpha.png" alt="" /></th></tr>
<tr>
  <td><a href="demo.canvas/3_1_canvas_drawimage.htm">drawImage(HTMLImageElement)</a></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td></tr>
<tr>
  <td><a href="demo.canvas/3_1_canvas_drawimage.htm">globalAlpha + <br />drawImage(HTMLImageElement)</a></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5">SL</span>
      <span class="star lv5">Flash</span>
      <span class="star lv3">VML</span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td></tr>
<tr>
  <td><a href="demo.canvas/3_5_canvas_drawimage_canvas.htm">drawImage(HTMLCanvasElement)</a></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv4">SL</span>
      <span class="star lv5">Flash</span>
      <span class="star lv3">VML</span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td></tr>
<tr>
  <td><a href="demo.canvas/3_5_canvas_drawimage_canvas.htm">globalAlpha + <br />drawImage(HTMLCanvasElement)</a></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv4">SL</span>
      <span class="star lv5">Flash</span>
      <span class="star lv2">VML</span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td></tr>
<tr>
  <th>Pixel API</th>
  <th><img src="img/c32.alpha.png" alt="" /></th>
  <th><img src="img/s32.alpha.png" alt="" /></th>
  <th><img src="img/i32.alpha.png" alt="" /></th>
  <th><img src="img/e32.alpha.png" alt="" /></th>
  <th><img src="img/o32.alpha.png" alt="" /></th>
  <th><img src="img/f32.alpha.png" alt="" /></th></tr>
<tr>
  <td>createImageData()</td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv0">SL</span>
      <span class="star lv5">Flash</span>
      <span class="star lv0">VML</span></td>
  <td><span class="star lv0">9.6+</span>
      <span class="star lv5">10.50+</span></td>
  <td><span class="star lv0">3.0+</span>
      <span class="star lv5">3.5+</span></td></tr>
<tr>
  <td><a href="demo.canvas/10_3_canvas_getImageData.htm">getImageData(),<br />putImageData()</a></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv0">SL</span>
      <span class="star lv4">Flash</span>
      <span class="star lv0">VML</span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td></tr>
</tbody>
</table>

<hr />
<h2>Installation - 導入方法</h2>
<p>1. <span lang="ja">Flash backend を利用するには、uuCanvas.js と同じディレクトリに uu.canvas.swf を設置します。</span></p>
<p>2. <span lang="ja">グローバル関数 window.xcanvas() を定義しておくと、Canvasが利用可能になったタイミングでシステム側からコールバックします。
  第一引数に uu オブジェクトが、第二引数に document.getElementsByTagName("canvas") の結果が渡されます。</span></p>
<pre class="eg">
window.xcanvas = function(uu, canvasNodes) {
    var ctx = canvasNodes[0].getContext("2d");

    ctx.textBaseline = "top";
    ctx.fillText("Canvas Ready", 0, 0);
}
</pre>

<p>3. <span lang="ja">具体的には、このようにします。</span></p>

<a href="demo.canvas/HelloCanvasWorld.htm" class="run">RUN</a>
<pre class="eg">
&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8" /&gt;
&lt;title&gt;Hello HTML5::Canvas world&lt;/title&gt;
&lt;script src="<b>uuCanvas.js</b>"&gt;&lt;/script&gt;
&lt;script&gt;
<b>function xcanvas(uu, canvasNodes)</b> {
    var ctx = canvasNodes[0].getContext("2d");

    ctx.textBaseline = "top";
    ctx.font = "32pt Arial";
    ctx.fillStyle = "black";
    ctx.shadowColor = "gray";
    ctx.shadowOffsetX = 10;
    ctx.shadowOffsetY = 10;
    ctx.shadowBlur = 5;
    ctx.fillText("YES", 0, 0);
    ctx.fillText("WE", 0, 40);
    ctx.fillText("CANVAS!", 0, 80);
}
&lt;/script&gt;
&lt;/head&gt;&lt;body&gt;
&lt;h1&gt;A &lt;code&gt;hello world&lt;/code&gt; example&lt;/h1&gt;
    &lt;canvas id="canvas" <b>class="flash silverlight vml"</b> width="500" height="200"&gt;&lt;/canvas&gt;
&lt;/body&gt;&lt;/html&gt;
</pre>

<p>4. <span lang="ja">Flash がローカル環境(file://...)で動かない場合は、
  サーバにファイル一式をアップロードするか、<a href="http://www.macromedia.com/support/documentation/jp/flashplayer/help/settings_manager04.html">グローバルセキュリティ設定パネル</a> で、
  uu.canvas.swf が設置されているフォルダに許可を与えてください。</span></p>

<hr />
<h2><a name="uupaajs">Canvas とその周辺機能の実装を、より簡単にする一連の機能</a></h2>
<p>uuCanvas.js は uupaa.js とベースコードが同じなので、以下の様々な支援機能が利用できます。</p>
<dl>
    <dt>uu.ver - ブラウザのバージョンとプラグイン情報</dt>
    <dd><p>ブラウザのバージョンとプラグインなどの動作に必要な情報を提供します。</p>
        <p>uu.ver.ie, uu.ver.ie8, uu.ver.gecko, uu.ver.advanced などがあります。</p>
    </dd>
    <dt>uu.array, uu.hash - 配列とHashハンドラ</dt>
    <dd><p>素のJavaScriptに不足しがちな機能を提供します。</p>
    </dd>
    <dt>uu.attr, uu.css, uu.node - 属性, CSS, Nodeハンドラ</dt>
    <dd><p>素のJavaScriptに不足しがちな機能を提供します。</p>
    </dd>
    <dt>uu.style - getComputedStyle 互換機能の提供</dt>
    <dd><p>window.getComputedStyle() の互換機能を提供します。</p>
    </dd>
    <dt>uu.id, uu.tag, uu.klass - セレクタ</dt>
    <dd><p>document.getElementById, document.getElementsByTagName, document.getElementsByClassName の互換機能を提供します。</p>
    </dd>
    <dt>uu.color - カラーハンドラ</dt>
    <dd><p>カラーフォーマットの相互変換や操作、合成機能を提供します。</p>
        <p>uu.color.gray, sepia, comple, arrange, rgba2hsva, hsva2rgba, rgba2hsla, hsla2rgba などがあります。</p>
    </dd>

    <dt>uu.event - イベントハンドラ</dt>
    <dd><p>イベントハンドラの機能を提供します。</p>
    </dd>
    <dt>uu.ready - ブートローダー</dt>
    <dd><p>任意のプライオリティで起動時にコールバックする機能を提供します。</p>
    </dd>
    <dt>uu.fix, uu.format, uu.trim, uu.split, uu.json - 文字列の相互変換, プレースホルダ, トリム, 分割, JSON</dt>
    <dd><p>JavaScriptに不足している、文字列操作系の機能を補完します。</p>
    </dd>
    <dt>uu.has, uu.like, uu.type, uu.isNumber, uu.isString, Array.isArray, uu.isFunction - 型の判別</dt>
    <dd><p>クロスブラウザな型の判別機能を提供します。</p>
    </dd>
    <dt>uu.win.size - ウインドウサイズ</dt>
    <dd><p>ウインドウのクライアント領域のサイズやスクロールオフセットサイズを取得できます。</p>
    </dd>
    <dt>ECMAScript-262 5th Edition</dt>
    <dd><p>Array.forEach, indexOf, lastIndexOf, every, some, map, filter, reduce, reduceRight<br />
           Boolean.toJSON, Date.toJSON, Number.toJSON, String.trim, String.toJSON などの機能を提供します。</p>
    </dd>
    <dt>Firefox で innerText, outerHTML をサポート</dt>
    <dd><p>Firefox で利用できない innerText と outerHTML を拡張します。</p>
    </dd>
    <dt>uu.img - 画像のプリローダー, 本来のサイズの取得</dt>
    <dd><p>drawImage を行ううえで必要になる画像のプリローダーと、
           画像本来のサイズを取得するメソッドを提供します。</p>
    </dd>
    <dt>uu.font - フォントハンドラ</dt>
    <dd><p>その環境で使えるフォント一覧の取得や、フォントのパースなど、
           テキストをレンダリングする上で必須となる機能を提供します。</p>
        <p>uu.font.parse, detect, metric, ready などがあります。</p>
    </dd>
</dl>

<hr />
<h2><a name="fonts">Fonts - フォント</a></h2>
<h4>High compatibility fonts - 互換性の高いフォント</h4>
<p><span lang="ja">Silverlight は以下のフォントを内蔵しています。
    これらのフォントは Silverlight と VML でほぼ同じレンダリング結果になるように調整が行われます。</span></p>
<ul>
  <li>Arial                            </li>
  <li>Arial Black                      </li>
  <li>Comic Sans MS                    </li>
  <li>Courier New                      </li>
  <li>Georgia                          </li>
  <li>Lucida Grande/Lucida Sans Unicode</li>
  <li>Times New Roman                  </li>
  <li>Trebuchet MS                     </li>
  <li>Verdana                          </li>
</ul>
<pre>
ctx.font ="32pt 'Times New Roman','Arial Black'";
ctx.fillText("Good support");
</pre>
<span lang="ja">
これ以外のフォントを指定すると、Silverlight と VML で描画結果が異なる場合があります。
<br />そのような場合は、xTextMarginTop を設定することで、調整が可能です。</span>

<h4>Japanese font - フォントの日本語名</h4>
<p><span lang="ja">Silverlight ではフォントの日本語名を指定できません、英語名で指定する必要があります。
    <br />ここに記載されていないフォントについても同様です。</span></p>
<table>
<tr><th>日本語名                      </th><th>英語名             </th></tr>
<tr><td>"ＭＳ 明朝"                   </td><td>"MS Mincho"        </td></tr>
<tr><td>"ＭＳ Ｐ明朝"                 </td><td>"MS PMincho"       </td></tr>
<tr><td>"ＭＳ ゴシック"               </td><td>"MS Gothic"        </td></tr>
<tr><td>"ＭＳ Ｐゴシック"             </td><td>"MS PGothic"       </td></tr>
<tr><td>"メイリオ"                    </td><td>"Meiryo"           </td></tr>
<tr><td>"IPAゴシック"                 </td><td>"IPAGothic"        </td></tr>
</table>
<pre>
ctx.font ="32pt 'MS Mincho'";
ctx.fillText("フォントの日本語名は指定できません");
</pre>

<hr />
<h2>Links</h2>
<ul>
  <li><a href="http://www.whatwg.org/specs/web-apps/current-work/">HTML5 spec</a></li>
  <li><a href="http://code.google.com/p/explorercanvas/">ExplorerCanvas</a></li>
  <li><a href="http://msdn.microsoft.com/en-us/library/bb979679(VS.95).aspx">Silverlight reference</a></li>
  <li><a href="http://msdn.microsoft.com/en-us/library/bb263898(VS.85).aspx">VML reference</a></li>
</ul>

<hr />
<h2>Address of thanks - 謝辞</h2>
<ul>
  <li>VML Backend は ExplorerCanvas から多くヒントをいただきました。</li>
  <li>Flash Backend の lib/Canvas/src/Bezier_lib.as ファイルは Timothee Groleau さんの
      <a href="http://timotheegroleau.com/Flash/articles/cubic_bezier_in_flash.htm">Bezier_lib.as</a> を組み込んでいます。</li>
  <li>Flash Backend の lib/Canvas/src/CanvasArc.as は Colin Leung さんの
      <a href="http://code.google.com/p/ascanvas/">ascanvas</a> の arc() メソッドを元にしたコードを組み込んでいます。</li>
  <li>Flash Backend の lib/Canvas/src/com/adobe/images は
      <a href="http://code.google.com/p/as3corelib/">as3corelib</a> project の成果物を組み込んでいます。</li>
</ul>

</body>
</html>
